<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的积分</title>
    <link rel="stylesheet" href="styles.css">
</head>
<style>
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
    text-align: center;
}


main {
    padding: 20px;
}

#points-log li {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
}

</style>
<body>
    <header>
        <h2>我的积分</h2>
    </header>
    <main>
        <section id="points-info">
            <h2>剩余积分: <span id="current-points">100</span></h2>
            <p>积分消耗记录:</p>
            <div class="col-12">
                    <table class="table col-12">
                        <thead style="font-weight: bold">
                        <tr>
                            <td width="25%" align="cneter" style="text-align: center;">日期</td>
                            <td width="55%" >使用文章</td>
                            <td width="20%" align="cneter" style="text-align: center;">消耗积分数量</td>

                        </tr>
                        </thead>
                        <tr>
                            <td align="center">12.18</td>
                            <td>利用python Flask框架开发Web应用系统</td>
                            <td align="center">1</td>

                        </tr>
                        <tr>
                            <td align="center">12.17</td>
                            <td>某某某的打瓦日记</td>
                            <td align="center">20</td>

                        </tr>
                        <tr>
                            <td align="center">12.16</td>
                            <td>永劫最甜恋综</td>
                            <td align="center">10</td>

                        </tr>
                        <tr>
                            <td align="center">12.15</td>
                            <td>一口气看完XXX电影</td>
                            <td align="center">5</td>

                        </tr>
                    </table>


                </div>
        </section>
    </main>

</body>
</html>